<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    title="上传新增"
    width="470px"
    :close-on-click-modal="false"
    append-to-body
    @close="cancel"
  >
    <div>
      <el-form ref="fileForm" :model="fileParam" :rules="rules" size="small" label-width="100px">
        <el-form-item label="采购ID：" prop="buyerId">
          <el-select v-model="fileParam.buyerId" size="mini" style="width: 280px;">
            <el-option v-for="bid in buyerList" :key="bid" :label="bid" :value="bid" />
          </el-select>
        </el-form-item>
        <el-form-item prop="type">
          <el-popover slot="label" placement="top-start" trigger="hover">
            <div style="width:280px"><b>鲜食非进口成对商品建立:</b>成对商品中可导入非DI非自营商品，但必须与自营商品同时建立，非DI非自营商品会发往供应商端确认。</div>
            <el-divider />
            <div style="width:280px"><b>其他:</b>只可导入DI商品或自营商品。</div>
            <span slot="reference">模式：</span>
          </el-popover>
          <el-select v-model="fileParam.type" size="mini" style="width: 280px;">
            <el-option :key="1" label="鲜食非进口成对商品建立" :value="1" />
            <el-option :key="2" label="其他" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :on-change="handleOnChange"
            :limit="1"
            :multiple="false"
            :file-list="fileList"
            action="#"
          >
            <el-button size="mini" type="primary">点击选择上传Excel文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且大小不超过5MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" size="mini" @click="cancel">取消</el-button>
      <el-button type="primary" size="mini" @click="doSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
import { createNewItem } from '@/api/new-item'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      fileList: [],
      buyerList: [],
      fileParam: {},
      rules: {
        buyerId: [
          { required: true, message: '请选择采购', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择模式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.dialog = false
      this.fileList = []
      this.buyerList = []
      this.fileParam = {}
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      Message({
        message: '文件上传数量限制为1个。',
        type: 'warning',
        duration: 3 * 1000
      })
    },
    // 文件变动的钩子
    handleOnChange(file, fileList) {
      if (!(file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
        Message({
          message: '请上传格式为 xlsx 的Excel文件。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      }
      var size = file.size / 1024 / 1024
      if (size > 5) {
        Message({
          message: 'Excel文件大小必须小于5M。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      } else {
        this.fileList = fileList
      }
    },
    // 确定按钮触发
    doSubmit() {
      this.$refs.fileForm.validate(async(valid) => {
        if (valid) {
          if (this.fileList.length > 0) {
            try {
              this.loading = true
              const file = this.fileList[0]
              var formData = new FormData()
              formData.append('file', file.raw)
              formData.append('buyerId', this.fileParam.buyerId)
              formData.append('type', this.fileParam.type)
              const res = await createNewItem(formData)
              if (res && Object.prototype.toString.call(res) === '[object Object]') {
                this.$emit('uploadSuccess', res)
                this.dialog = false
              }
            } catch (error) {
              this.fileList.pop()
            } finally {
              this.loading = false
            }
          } else {
            Message({
              message: '请选择上传Excel。',
              type: 'error',
              duration: 3 * 1000
            })
          }
        }
      })
    }
  }
}
</script>
